<template>
	<view class="nav-fixed" :style="{paddingTop:`${barHeight}px`}">
		<view class="cu-bar">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-locationfill text-gray"></text>
					 {{city}}
				</view>
				<view class="content text-bold">
					<image class="logo" src="../static/logo.png" mode="heightFix"></image>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="action text-grey">
					<text class="cuIcon-search"></text>
					<text class="cuIcon-sort"></text>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"custom-nav",
		data() {
			return {
				barHeight:0
			};
		},
		computed: {
			city() {
				return this.$store.state.loc.city 
			}
		},
		created() {
			uni.getSystemInfo({
				success: ({statusBarHeight}) => {
					this.barHeight = statusBarHeight
				}
			})
		}
	}
</script>

<style lang="scss">
.logo{
	height: 25upx;
}
.cu-bar{
	width: 100%;
}
.nav-fixed{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
</style>